<template>
  <div class="collocation">
    <div class="coll-name">美食搭配</div>
    <div class="collocation-box" v-loading="loading">
      <div class="top-one">
        <div>
          <a :href="vhref + colllist[0].fmId"
            ><img :src="colllist[0].fmImg" alt=""
          /></a>
        </div>
        <div>
          <a :href="vhref + colllist[0].fmId">
            &nbsp;&nbsp;&nbsp; {{ colllist[0].fmTitle }}</a
          >
        </div>
        <div>
          <a :href="vhref + colllist[0].fmId">
            <div v-html="colllist[0].fmContent"></div
          ></a>
        </div>
      </div>
      <div class="coll-right">
        <div class="coll-item" v-for="(item, index) in size" :key="index">
          <div>
            <div class="coll-line"></div>
            <a class="coll-yi" :href="vhref + colllist[index + 1].fmId">{{
              colllist[index + 1].fmTitle
            }}</a>
          </div>
          <a class="coll-yi" :href="vhref + colllist[index + 1].fmId">
            <div v-html="colllist[index + 1].fmContent"></div>
          </a>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="4"
        :currentPage="curPage"
        @current-change="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
  name: "Collocation",
  data() {
    return {
      colllist: "",
      total: 0,
      indexs: "",
      curPage: 1,
      vhref: "/vcollocationitem?fmId=",
      size: "",
      loading: true,
    };
  },
  created() {
    if (this.$route.query.pageNum != undefined) {
      this.curPage = this.$route.query.pageNum;
      console.log(this.curPage);
    }
    request({
      url: "/foodmatching/queryFoodMatching",
      params: {
        pageNum: this.curPage,
      },
    })
      .then((res) => {
        this.colllist = res.data.data.list;
        this.size = res.data.data.list.length - 1;
        this.total = res.data.data.total;
        this.loading = false;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    page(currentPage) {
      this.loading = true;
      request({
        url: "/foodmatching/queryFoodMatching",
        params: {
          pageNum: currentPage,
        },
      })
        .then((res) => {
          this.colllist = res.data.data.list;
          this.total = res.data.data.total;
          this.size = res.data.data.list.length - 1;
          this.loading = false;
          console.log(res.data.data);
          this.$router.push({
            path: "/collocaitem",
            query: {
              pageNum: currentPage,
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.collocation {
  margin-top: 0.2rem;
  padding-bottom: 0.07rem;
}
.coll-name {
  font-size: 0.18rem;
  padding-top: 0.5rem;
  text-align: center;
}

.collocation-box {
  padding-top: 0.5rem;
  display: flex;
  font-size: 0.1rem;
}

.collocation-box img {
  width: 3.6rem;
  height: 1.7rem;
}

.top-one {
  border-left: 1.5px solid rgb(196, 194, 192);
  margin: 0 auto;
}

.top-one a {
  text-decoration: none;
  color: #000;
}

.top-one :nth-child(2) {
  width: 3.6rem;
  border-left: 2px solid rgb(88, 67, 46);
  margin-top: 0.2rem;
  font-size: 0.11rem;
}

.top-one :nth-child(3) {
  width: 3.4rem;
  margin-top: 0.1rem;
  font-size: 0.08rem;
  margin-left: 0.25rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin-bottom: 0.2rem;
}

.top-one :nth-child(3) a {
  color: rgb(122, 115, 115);
}

.coll-right {
  margin: 0 auto;
}

.coll-right a {
  text-decoration: none;
  color: #000;
}

.coll-right :nth-child(2) {
  border-top: 0;
  border-bottom: 0;
}

.coll-item {
  width: 4.8rem;
  border: 1px solid rgb(53, 50, 47);
  border-right: 0;
  overflow: hidden;
}

.coll-item :nth-child(1) {
  margin-top: 0.13rem;
  margin-left: 0.1rem;
}

.coll-item :nth-child(1) div {
  width: 2px;
  height: 0.12rem;
  background-color: #000;
  position: relative;
  top: 0rem;
  left: -0.5rem;
  transition: all 0.5s;
}

.coll-item :nth-child(1) a {
  font-size: 0.11rem;
}

.coll-item :nth-child(2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-left: 0.2rem;
  margin-bottom: 0.15rem;
  margin-top: -0.14rem;
  font-size: 0.09rem;
}

.coll-yi {
  font-size: 0.1rem;
  transition: all 0.5s;
}

.coll-yi div {
  color: rgb(85, 83, 83);
}

.coll-item:hover .coll-line {
  left: -0.1rem;
}

.coll-item:hover .coll-yi {
  margin-left: 0.3rem;
}
</style>